<script setup>
import { reactive } from 'vue'
import { ExclamationCircleOutlined, CopyOutlined } from '@ant-design/icons-vue'
const state = reactive({
    visible: false,
    noRiskUrl: '',
    qrcodeUrls: '',
})

const openDialog = (item) => {
    for (let key in item) {
        state[key] = item[key]
    }
    state.visible = true
}
const close = () => {
    state.visible = false

}
defineExpose({
    openDialog,
    close,
})
</script>
<template>
    <!-- 点击生成分享的弹框 -->
    <a-modal v-model:visible="state.visible" title="分享微信卡片链接" :width='600' :footer="null">
        <div>
            <div style="margin-bottom: 15px; margin-top: 30px;">
                <span style="font-weight: bold;">抖音无风险链接：</span>{{ state.noRiskUrl ||
                    '../../assets/img/shortUrl/copy.png' }}
                <CopyOutlined></CopyOutlined>
            </div>
            <div>
                <span style="font-weight: bold;">通用链接：</span>{{ state.qrcodeUrls || '../../assets/img/shortUrl/copy.png'
                }}
                <CopyOutlined></CopyOutlined>
            </div>
        </div>
        <!-- 二维码部分 -->
        <div style="text-align: center;">
            <!-- <vue-qrcode :value='state.qrcodeUrls' :width="300"></vue-qrcode> -->
            <img style="width: 300px;" src="../imgs/test_erweima.png" alt="">

        </div>
        <div style="text-align: center;margin-top:-15px;">请使用<a href='###'>微信</a>扫码</div>
        <div style='margin:8px 0; text-align: center;'>
            <div style='padding:10px;background-color:#EFF6FF;margin-top:15px;'>
                <ExclamationCircleOutlined style='color:#4096FF;margin-right:5px;' />
                扫码打开网页后分享给好友，群，朋友圈，也可以将二维码截图发给其他人使用
            </div>
        </div>
        <div style='text-align: center;'>
            <a-button type="primary" @click="state.visible = false" style='margin-top:15px;'>关闭</a-button>
        </div>
    </a-modal>
</template>


<style lang="scss" scoped></style>